<!--
 * @Author: 宋杰
 * @Date: 2020-12-30 23:32:18
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-01-28 09:37:37
 * @Description: 一家十一口(猜一字) 通知公告
-->
<template>
  <div class="div1" v-loading="loading">
    <!-- 头部搜索框 -->
    <div class="div2">
      <div class="topBox3">
        <div class="topBox3_sou">
          <!-- 日期 -->
          <div class="topBox3_sou1">
            <span>创建时间: </span>
            <el-date-picker
              v-model="findValue"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="creationTime"
            >
            </el-date-picker>
          </div>

          <el-button type="primary" class="sousuoBox" @click="findValueTime">
            <i class="el-icon-search"></i>
            <span>查找</span>
          </el-button>
        </div>
      </div>
    </div>

    <!-- con -->
    <div class="div3">
      <div class="div3_xinzen">
        <el-button
          type="primary"
          size="small"
          @click="centerDialogVisible2 = true"
          ><i class="el-icon-circle-plus-outline"></i
          ><span>新增公告</span></el-button
        >
        <!-- 新增公告 -->
        <el-dialog :visible.sync="centerDialogVisible2" center class="eldialog">
          <div class="eldialog_top">新增公告</div>
          <el-form
            label-position="right"
            label-width="80px"
            :model="newAnnouncement"
          >
            <el-form-item label="公告名称">
              <el-input v-model="newAnnouncement.noticeTitle"></el-input>
            </el-form-item>
            <el-form-item label="公告内容">
              <el-input
                clear="textareaBox"
                type="textarea"
                v-model="newAnnouncement.noticeContent"
              ></el-input>
            </el-form-item>
            <el-form-item label="公告有效期">
              <el-date-picker
                v-model="dateOf"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="—"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="发布者">
              <el-input v-model="newAnnouncement.publisher"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button
              plain
              type="primary"
              @click="centerDialogVisible2 = false"
              >取 消</el-button
            >
            <el-button type="primary" @click="newAnnouncementsSave"
              >保 存</el-button
            >
          </span>
        </el-dialog>
      </div>
      <!-- 新增end -->
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="noticeId" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="noticeTitle" label="公告标题"> </el-table-column>
        <el-table-column prop="publisher" label="用户名"> </el-table-column>
        <el-table-column prop="validTime" label="有效时间"> </el-table-column>
        <el-table-column prop="state" label="状态"> </el-table-column>
        <!-- 操作按钮 -->
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(1, scope.row)"
              type="text"
              size="small"
              >关闭</el-button
            >
            <el-button
              @click="handleClick(0, scope.row)"
              type="text"
              size="small"
              >启用</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- con end -->

    <!-- 分页 -->
    <div class="div4">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="total"
        background
      >
      </el-pagination>
    </div>
    <!-- 分页end -->
  </div>
</template>

<script>
import zhaunhuan from '../../../common/month';
export default {
  name: "",
  data() {
    return {
      loading: true, //页面加载
      // 搜索日期选择
      creationTime: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      findValue: null, //通知公告点击搜索

      // 主要内容列表
      tableData: [],
      // 主要内容列表 end

      // 新增公告
      centerDialogVisible2: false, //弹窗
      // labelPosition: "right",
      // 新增公告调用接口需要的参数
      newAnnouncement: {
        noticeTitle: "", //标题
        // noticeType: "",
        noticeContent: "", //内容
        noticeStarttime: "", //开始时间
        noticeEndtime: "", //结束时间
        publisher: "" //发布者
        // status: ""
      },
      // 弹窗 日期选择
      dateOf: null, //日期
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      // 新增公告 end

      // 分页
      pageNum: 1,
      total: null, //总条数
      currentPage1: 1
      // 分页end
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.findClick(); //获取列表数据
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    // 分页
    handleSizeChange(val) {
      this.pageNum = val;
      this.findClick();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.findClick();
      console.log(`当前页: ${val}`);
    },
    // 分页 end

    // 操作按钮
    handleClick(val, row) {
      console.log("row", row);
      let valData = {
        noticeId: row.noticeId, //id
        status: val //状态
      };
      this.$put("business/notice", valData)
        .then(res => {
          console.log("通知公告res", res);
        })
        .catch(err => {
          console.log("通知公告err", err);
        });
      this.findClick();
    },

    // 获取通知公告数据
    findClick() {
      let find = {
        pageNum: this.pageNum, //页数
        pageSize: "10", //每页条数
        createTime: this.findValue //创建时间
      };
      console.log("find", find);
      // let resData = [];
      this.$fetch("business/notice/list", find)
        .then(res => {
          // console.log("通知公告res", res);
          if (res.code == 200) {
            this.tableData = res.rows;
            this.total = res.total;
            this.tableData.forEach(val => {
              val["validTime"] = val.noticeStarttime + "--" + val.noticeEndtime;
              if (val.status == 0) {
                val["state"] = "开启";
              } else if (val.status == 1) {
                val["state"] = "关闭";
              }
            });
          }
          this.tableData.splice(1, 0); //可以用来刷新数组解决数据改变页面不变的问题
          // console.log("this.tableData", this.tableData);
          this.loading = false;
        })
        .catch(err => {
          console.log("通知公告err", err);
          this.loading = false;
        });
    },

    //新增公告
    newAnnouncementsSave() {
      this.centerDialogVisible2 = false;
      if (this.dateOf == null) {
      } else {
        // 开始时间
        let liststart = this.dateOf[0].toString().split(" ");

        let monthstart = zhaunhuan(liststart); //开始时间
        // 结束时间
        let listend = this.dateOf[1].toString().split(" ");
        let monthend = zhaunhuan(listend); //结束时间
        // 开始时间
        this.newAnnouncement.noticeStarttime =
          liststart[3] + "-" + monthstart + "-" + liststart[2];
        // 结束时间
        this.newAnnouncement.noticeEndtime =
          listend[3] + "-" + monthend + "-" + listend[2];
        console.log("开始时间", this.newAnnouncement.noticeStarttime);
        console.log("结束时间", this.newAnnouncement.noticeEndtime);
        console.log("this.newAnnouncement", this.newAnnouncement);

        // 新增公告上传数据
        this.$post("business/notice", this.newAnnouncement)
          .then(res => {
            console.log("res", res);
          })
          .catch(err => {
            console.log("err", err);
            console.log("失败");
          });
      }
      this.findClick();
    },
    // 新增公告 end

    // 查询方法
    findValueTime() {
      if (this.findValue == null) {
      } else {
        let time = this.findValue.toString().split(" ");
        let searchtime = zhaunhuan(time);
        this.findValue = time[3] + "-" + searchtime + "-" + time[2];
      }
      this.findClick();
    },
  }
};
</script>
<style scoped>
.div1 {
  /* border: 1px solid #000; */
  background: #f5f6fa;
}

/* 头部搜索 */
.div2 {
  margin-bottom: 20px;
}
.div2,
.div3 {
  /* border: 1px solid rgb(18, 141, 241); */
  background: #fff;
  /* border-radius: 8px; */
  padding: 10px;
}
.div3 >>> .cell {
  line-height: 22px;
}
.topBox3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  width: 100%;
  height: 49px;
}
/* 头部搜索 */
.sousuoBox {
  margin-left: 10px;
  height: 30px !important;
  padding: 0;
  width: 60px;
}
.topBox3_sou {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.topBox3_sou >>> .el-input {
  width: 180px;
}
.topBox3_sou > div {
  margin-right: 15px;
}
.topBox3_sou >>> .el-input__inner {
  height: 30px !important;
  line-height: 32px;
}

.topBox3_sou >>> .el-input__icon {
  /* height: 30px !important; */
  line-height: 32px;
  margin-right: 20px;
}
.topBox3_sou1 >>> .el-input__prefix {
  /* height: 30px !important; */
  display: flex;
  /* justify-content: flex-end; */
  width: 100%;
}

.topBox3_sou1 >>> .el-input__icon.el-icon-date {
  /* height: 30px !important; */
  line-height: 32px;
  margin-right: 20px;
  margin: 0;
  position: absolute;
  top: 0;
  right: 5px;
}
.topBox3_sou1 >>> .el-input__suffix {
  right: 25px;
}
/* 头部搜索end */

/* 内容 */
.div3 >>> .el-table thead {
  color: rgb(75, 74, 74) !important;
}
/* 内容end */
/* 分页 */
.div4 {
  background: #fff;
  width: 100%;
}
.div4 > :nth-child(1) {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.div4 >>> .el-pagination__total {
  position: absolute;
  left: 5px;
}
/* 分页end */
/* 新增 */
.div3_xinzen {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
/* 弹窗 */
.eldialog >>> .el-dialog {
  position: relative;
  min-width: 500px;
  min-height: 300px;
  border-radius: 6px;
  padding: 10px;
}
.eldialog >>> .el-dialog__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-bottom: 1px solid #eee;
}
.eldialog >>> .el-dialog__headerbtn {
  top: 15px;
}
.eldialog_top {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 30px;
  line-height: 30px;
}
.eldialog >>> .el-date-editor--daterange.el-input__inner {
  width: 100%;
}
.eldialog >>> .el-form-item__label {
  width: 100px !important;
}
.eldialog >>> .el-form-item__content {
  margin-left: 100px !important;
}
.eldialog >>> .el-textarea__inner {
  max-height: 60px;
}
</style>
